<template>
  <div class="main">
    <div class="card-gauge">
      <div class="card-title">
        <span> 航速优化</span>
        <span>更新时间：UTC时间 2021-05-12 17:18:21</span>
      </div>

      <div class="card-optin">
        <button>自动优化</button>
        <button>退出优化</button>
      </div>

      <div class="card-body d-flex">
        <div class="card-body-left">
          <div class="card-body-left-content">
            <div type="key">当前转速</div>
            <div type="val">49.1 rpm</div>
          </div>
          <div class="card-body-left-content">
            <div>推荐值</div>
            <div>47.1 rpm</div>
          </div>
        </div>

        <!-- 仪表盘 -->
        <div ref="gauge" class="card-body-m"></div>

        <div class="card-body-right">
          <div class="card-body-right-content">
            <div>下一节点剩余</div>
            <div>49.1 rpm</div>
          </div>
          <div class="card-body-right-content">
            <div>推荐值</div>
            <div>47.1 rpm</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { option } from "./option";

export default {
  mounted() {
    let chartDom = this.$refs.gauge;
    let myChart = echarts.init(chartDom);
    myChart.setOption(option);
  },
};
</script>

<style lang="less">
@space-width: 15px;
@echart-width: 250px;
@lr-width: 100px;

body {
  margin: 0;
  padding: 0;
  background: #ddd;
}

.d-flex {
  display: flex;
}

.d-flex-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: @echart-width + @lr-width + @lr-width;
  margin: 100px auto;
  background: #fff;
  padding: @space-width;
  border-radius: 3px;

  .card-gauge {
    .card-title {
      margin: @space-width 0;
      .d-flex();
      justify-content: space-between;
    }
    .card-optin {
      margin: @space-width 0;
      button {
        margin-right: @space-width;
      }
    }
    .card-body {
      .card-body-left {
        text-align: left;
        .d-flex-col();
        padding: 40px 0;
        width: @lr-width;
      }

      .card-body-m {
        width: @echart-width;
        height: @echart-width;
        padding: 0;
      }

      .card-body-right {
        text-align: right;
        padding: 40px 0;
        width: @lr-width;
        .d-flex-col();
      }
    }
  }
}
</style>
